<template>
	<view class="container_tcl135">
		<view class="top_image">
			<image src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/lhhy/sh30/sh30.jpg" style="width: 750rpx" mode="widthFix"></image>
			<view class="form-container">
				<uni-forms class="forms-item" ref="accountForm" :model="formData">
					<uni-forms-item>
						<input
							style="width: 600rpx; text-align: center;"
							maxlength="11"
							placeholder="请输入手机号"
							type="tel"
							v-model="formData.mobile"
							class="uni-input-input"
							placeholder-style="color: #969696;font-size:40rpx"
						/>
					</uni-forms-item>

					<view class="login-btn" style="text-align: center">
						<image @click="confirmOrder" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/lhhy/sh30/bt.png" style="width: 600rpx" mode="widthFix"></image>
					</view>
					<view style="margin-top: 20rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex; justify-content: center">
						<checkbox-group @change="changeAll">
							<label>
								<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
								<text style="color: #000; font-weight: 400; font-size: 24rpx">已阅读并同意</text>
							</label>
						</checkbox-group>
						<text style="color: #2B82FE; font-weight: 600" @click="privatePro(1)">《隐私政策》</text>
						<text style="color: #2B82FE; font-weight: 600" @click="privatePro(252430)">《产品说明》</text>
					</view>
				</uni-forms>
			</view>
		</view>

		<uni-popup ref="popupPro" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>
		<!-- <view class="arrive-btn" :style="{ display: showHeight > 700 ? '' : 'none' }">
			<image @click="toTop" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/lhhy/sh30/bt.png" mode="widthFix"></image>
		</view> -->
		<view class="fixed-1" @click="privatePro(252430)">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/rule.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-2" @click="receiveEquity">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/link.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-4" @click="phone">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/phone.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, onMounted, watchEffect, watch } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import initApi from '@/apis/init.js';
import { storeToRefs } from 'pinia';
import { constStore } from '@/store/const.js';
import { useUserStore } from '@/store/user.js';
import { getALPhoneNumber, getWXphoneNumber, uuIds } from '@/utils/login.js';
import { getProductNum } from '@/utils/commo.js';
const { userInfo } = storeToRefs(useUserStore());
const { constInfo } = constStore();
/* 协议 */
const uuIdsInit = uuIds();
const popupPro = ref();
const agreeType = ref(1);
const allChecked = ref();
const showHeight = ref(0);
const formData = reactive({
	mobile: '',
	smsCode: null,
	orderNo: null,
	channelCode: '',
	productCode: ''
});
const receiveEquity = () => {
	uni.navigateTo({
		url: `/pages/lhhy/equity`
	});
};
onLoad((query) => {
	// 怎么玩
		formData.channelCode = query.a;
		
		setTimeout(()=>{
			getProductNum(formData.channelCode,'')
		},500)
});
const onGetPhoneNumber = (e) => {
	console.log(e, 'eeeee');
	const {
		detail: { encryptedData, iv, code }
	} = e;
	const params = {
		appId: 'wxd288833c4af82e86',
		code
	};
	initApi.getWXAuthor(params).then((res) => {
		console.log(res, '自己手动获取手机号');
		if (res.code == 20000) {
			if (res.data.accessToken) {
				uni.setStorageSync('token', res.data.accessToken);
				userInfo.value.token = res.data.accessToken;
				formData.mobile = res.data.mobile;
				userInfo.value.mobile = res.data.mobile;
			}
			// 下单
			confirmOrder();
		}
	});
};
const confirmOrder = () => {
	console.log('提交订单', uuIds());
	const arr = {
		productCode: 'LH2545',
		channelCode: 'a62f67e376134ff5bab37fcf132dd31e',//formData.channelCode,
		mobile: formData.mobile ? formData.mobile : userInfo.value.info.mobile,
		orderType: 2,
		paymentMethod: 2,
		uniqueUserId: '',
		uuid: uuIds(),
		environmentCode: '12',
		scenarioCode: '7'
	};
	initApi.associateMemberSign(arr).then((res) => {
		console.log(res, 'uuiduuid');
		if (res.code == 20000) {
			handleJumpPaySign(res.data);
		} else {
			return uni.utils.toast(res.message);
		}
	});
};
/* 微信签约 */
const handleJumpPaySign = (query) => {
	window.location.href = query.extInfo?.alipaySignUrl;
	// wx.navigateToMiniProgram({
	// 	appId: 'wxbd687630cd02ce1d', // 第三方
	// 	// path: 'pages/lhhy/sh30/index',
	// 	extraData: query.extInfo,
	// 	success(res) {
	// 		// 成功跳转到签约小程序
	// 		return uni.utils.toast('签约成功');
	// 	},
	// 	fail(res) {
	// 		// 未成功跳转到签约小程序
	// 		return uni.utils.toast('签约失败');
	// 	}
	// });
};
const ok1 = () => {
	popupPro.value.close();
	allChecked.value = true;
};
const phone = () => {
	uni.makePhoneCall({
		phoneNumber: '400-8825101' //客服
	});
};

onPageScroll((e) => {
	showHeight.value = e.scrollTop;
});
const toTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};

const privatePro = (type) => {
	agreeType.value = type;
	popupPro.value.open('center');
};

const changeAll = (val) => {
	if (val.detail.value.length > 0) {
		allChecked.value = true;
	} else {
		allChecked.value = false;
	}
};
</script>

<style scoped lang="scss">
.container_tcl135 {
	width: 750rpx;
	height: 100%;
	margin: 0 auto;
	.top_image {
		position: relative;
	}
	.form-container {
		height: 340rpx;
		width: 690rpx;
		border-radius: 50rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50.5%);
		top: 818rpx;

		.uni-forms-item {
			margin-top: 10rpx;
			height: 100rpx;
			margin: 0 auto;
			background-color: #ffffff;
			border-radius: 100rpx;
			box-sizing: border-box;
			width: 620rpx;
			border: 1px solid #2E0F00;
			.uni-input-input {
				width: 620rpx;
				font-size: 38rpx;
				font-weight: 500;
			}
		}
	}
}
::v-deep {
	image {
		vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
	}
}
:deep(.uni-checkbox-input) {
	border-radius: 80rpx !important;
}
.wx-button {
	background-color: #409eff;
	width: 500rpx;
}
</style>
